<template>
    <div class="bigdata">
      <!-- canvas背景 -->
      <canvas ref="spaceCanvas" class="space-canvas"></canvas>
  
      <div >
        <div class="big-top">
          <div class="top-item posi-left">
            <div>清远市清城区天安智谷总部</div>
          </div>
          <div class="middle-item">
            广东猿收环保平台总览看板
          </div>
          <div class="top-item posi-right">
            <span>{{ currentime }}</span>
            <span>{{ currenweek }}</span>
          </div>
        </div>
        <div class="big-bottom ">
          <div class="left-box">
            <div class="people">
              <div class="people-item e-m-r-20">
                <div class="number">
                  <countTo :startVal='startVal' :endVal='all.usercount' :duration='2000'></countTo>
                  <span class="danwei">人</span>
                </div>
                <div class="text">
                  累计用户
                </div>
                <div class="radius">
                  <div class="center">
                    <span>新增用户：</span>
                    <div class="r-number color-warning">
                      --人
                    </div>
                  </div>
                </div>
              </div>
              <div class="people-item">
                <div class="number">
                  <countTo :startVal='startVal' :endVal='0' :duration='2000'></countTo>
                  <span class="danwei">人</span>
                </div>
                <div class="text">
                  累计员工
                </div>
                <div class="radius">
                  <div class="center">
                    <span>在线小哥：</span>
                    <div class="r-number color-warning">
                      --人
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="e-m-b-30"></div>
            <!-- 平台效益 -->
            <div class="account">
              <span class="position"></span>
              <span class="position"></span>
              <span class="position"></span>
              <span class="position"></span>
              <div class="title">
                今日回收额
              </div>
              <div class="number-top">
                <div class="n-left color-warning">
                  {{all.amount}}
                  <span class="e-font-20 ">元</span>
                </div>
                <div class="n-right">
                  环比增长
                  <span class="color-warning">
                    10.53%
                    <i class="el-icon-top" style="font-size: 2.5rem;font-weight: bolder;"></i>
                  </span>
                </div>
              </div>
              <div class="gradient"></div>
              <div class="title">
                今日预估销售额
              </div>
              <div class="number-top">
                <div class="n-left color-danger">
                  {{ all.salesamount }}
                  <span class="e-font-20 ">元</span>
                </div>
                <div class="n-right">
                  环比增长
                  <span class="color-danger">
                    10.21%
                    <i class="el-icon-top" style="font-size: 2.5rem;font-weight: bolder;"></i>
                  </span>
                </div>
              </div>
            </div>
            <div class="e-m-b-30"></div>
            <!-- 树状图 -->
            <div class="account">
              <span class="position"></span>
              <span class="position"></span>
              <span class="position"></span>
              <span class="position"></span>
              <div class="title">
                今日回收和出库情况
              </div>
              <div class="shu-chart" id="main" style="height: 100%;">
  
              </div>
            </div>
            <div class="e-m-b-30"></div>
          </div>
          <div class="middle-box">
            <div class="head">
              <div class="head-center">
                <div class="head-name">
                  今日回收总重量{{ all.ordercomplete.todayrecoveryweight }}(KG)
                </div>
                <div class="posi-box">
                  <div class="center">
                    <!-- <div class="center-item e-m-r-10">
                      <countTo :startVal='startVal' :endVal='oneVal' :duration='3000'></countTo>
                    </div>
                    <div class="center-item e-m-r-10">
                      <countTo :startVal='startVal' :endVal='twoVal' :duration='3000'></countTo>
                    </div>
                    <div class="center-item e-m-r-10">
                      <countTo :startVal='startVal' :endVal='threeVal' :duration='3000'></countTo>
                    </div>
                    <div class="center-item e-m-r-10">
                      <countTo :startVal='startVal' :endVal='fourVal' :duration='3000'></countTo>
                    </div>
                    <div class="center-item">
                      <countTo :startVal='startVal' :endVal='fireVal' :duration='3000'></countTo>
                    </div> -->
                    <div class="center-item e-m-r-10" v-for="(item, index) in recoveryweight" :key="item.id">
                      <countTo :startVal='startVal' :endVal='parseInt(item)' :duration='3000'></countTo>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="map">
              <span class="position"></span>
              <span class="position"></span>
              <span class="position"></span>
              <span class="position"></span>
              <div class="map-center" id="container">
  
              </div>
            </div>
            <!-- <div class="progress">
              <div class="pro-item">
                <el-progress type="circle" :stroke-width="10" :width="95" color="#ffc107"
                  :percentage="Number(all.user.activityratio.toFixed(0))"></el-progress>
                <div class="e-m-t-5">用户活跃率</div>
              </div>
              <div class="shu"></div>
              <div class="pro-item">
                <el-progress type="circle" :stroke-width="10" :width="95" color="#dc3545"
                  :percentage="Number(all.brother.activityratio.toFixed(0))"></el-progress>
                <div class="e-m-t-5">小哥在线率</div>
              </div>
              <div class="shu"></div>
              <div class="pro-item">
                <el-progress type="circle" :stroke-width="10" :width="95" color="#57b8cd"
                  :percentage="Number(all.store.activityratio.toFixed(0))"></el-progress>
                <div class="e-m-t-5">站点活跃率</div>
              </div>
            </div> -->
          </div>
          <div class="right-box left-box">
            <div class="people">
              <div class="people-item e-m-r-20">
                <div class="number">
                  <countTo :startVal='startVal' :endVal='all.newuserorder.quantity.count' :duration='2000'></countTo>
                  <span class="danwei">单</span>
                </div>
                <div class="text">
                  订单量
                </div>
                <div class="radius">
                  <div class="center">
                    <span>今日订单：</span>
                    <div class="r-number color-warning">
                      {{ all.newuserorder.quantity.add }}单
                    </div>
                  </div>
                </div>
              </div>
              <div class="people-item">
                <div class="number">
                  <countTo :startVal='startVal' :endVal='0' :duration='2000'></countTo>
                  <span class="danwei">kg</span>
                </div>
                <div class="text">
                  减碳量
                </div>
                <div class="radius">
                  <div class="center">
                    <span>今日减碳量：</span>
                    <div class="r-number color-warning">
                      0KG
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="e-m-b-30"></div>
            <!-- 平台效益 -->
            <div class="account" style="height: 247px;">
              <span class="position"></span>
              <span class="position"></span>
              <span class="position"></span>
              <span class="position"></span>
              <div class="title">
                最新订单
              </div>
              <div class="records e-m-t-15 color-warning e-font-14">
                <!-- <ul :style="{top: tableTop + 'px'}">
                  <li class="flex" v-for="(item,index) in tableList" :key="index">
                    <div class="flex-item">
                      {{  (item.name).substr(0,1)+'***'}}
                    </div>
                    <div class="flex-item">
                      {{item.address}}
                    </div>
                    <div class="flex-item">
                      {{item.mobile}}
                    </div>
                  </li>
                </ul> -->
                <infinite-scroll :list="tableList"></infinite-scroll>
              </div>
            </div>
            <div class="e-m-b-30"></div>
            <!-- 折线图 -->
            <div class="account">
              <span class="position"></span>
              <span class="position"></span>
              <span class="position"></span>
              <span class="position"></span>
              <div class="title">
                今日订单统计
              </div>
              <div class="shu-chart" id="main1" style="height: 100%;">
  
              </div>
            </div>
            <div class="e-m-b-30"></div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  const mapData = require('@/plugins/QYMapData.json');
  
  import * as echarts from 'echarts';
  import countTo from 'vue-count-to';
  
  export default {
    components: {
      countTo
    },
    head() {
      return {
        title: '大数据看板'
      }
    },
    data() {
      return {
        loading: false,
        tableTop: 0, //偏移距离
        startVal: 0,
        oneVal: 6,
        twoVal: 2,
        threeVal: 1,
        fourVal: 9,
        fireVal: 7,
        userpeople: 38454,
        bortherpeople: 1688,
        account: 2001,
        kgaccount: 1250,
        currentime: '',
        currenweek: '',
        tableTimer: null,
        tableListSize: 0, //列表的条数
        visibleSize: 7, //容器内可视最大完整行数
        lineHeight: 30, //每行的实际高度（包含margin-top/bottom,border等）
        tableList: [
          // {
          //   name: '小刘',
          //   address: '广东省清远市洲心街道风景天下26栋',
          //   number: '13612340923'
          // },
          // {
          //   name: '小黄',
          //   address: '广东省清远市洲心街道风景天下26栋',
          //   number: '136106540923'
          // },
          // {
          //   name: '小罗',
          //   address: '广东省清远市洲心街道风景天下26栋',
          //   number: '136105097923'
          // },
          // {
          //   name: '小陈',
          //   address: '广东省清远市洲心街道风景天下26栋',
          //   number: '13610502723'
          // },
          // {
          //   name: '小田',
          //   address: '广东省清远市洲心街道风景天下26栋',
          //   number: '13610598723'
          // },
          // {
          //   name: '小潘',
          //   address: '广东省清远市洲心街道风景天下26栋',
          //   number: '13610536523'
          // },
          // {
          //   name: '小蓝',
          //   address: '广东省清远市洲心街道风景天下26栋',
          //   number: '13610589523'
          // },
          // {
          //   name: '小欧',
          //   address: '广东省清远市洲心街道风景天下26栋',
          //   number: '136105945623'
          // },
        ],
        // 获取数据
        all: {
          brother: {
            activityratio: 0
          },
  
          carbon: {},
          newuserorder: {
            quantity: {
              add: {},
              count: {},
            }
          },
          ordercomplete: {
            platformbenefits: {},
            pay: {},
            recoveryweight: 0,
          },
          store: {
            activityratio: 0
          },
          user: {
            activityratio: 0
          },
          // 回收排行
          recycle:{
            "quantity": 0, //回收总件数
            "onsitequantity": 0, //回收线上总件数
            "storequantity": 0, //回收线下总件数
            "ordernumber": 0, //回收总单数
            "onsiteordernumber": 0, //回收线上总单数
            "storeordernumber": 0, //回收线下总单数
            "weight": 0, //回收总重量
            "onsiteweight": 0, //回收线上总重量
            "storeweight": 0, //回收线下总重量
            "grossprofit": 0, //回收总毛利
            "onsitegrossprofit": 0, //回收线上总毛利
            "storegrossprofit": 0, //回收线下总毛利
            "salesamount": 0, //预估销售总金额
            "onsitesalesamount": 0, //预估销售线上总金额
            "storesalesamount": 0, //预估销售线下总金额
            amount: 0, //回收总金额
            "onsiteamount": 0, //回收线上总金额
            "storeamount": 0, //回收线下总金额
            "stockquantity": 0, //库存总件数
            "stockweight": 0, //库存总重量
            "stockestimation": 0, //库存总估值（元）
            "notinstockquantity": 0, //未入库总件数
            "notinstockweight": 0, //未入库总重量
            "notinstockestimation": 0, //未入库总估值（元）
            "stockweightestimation": 0, //库存称重总估值（元）
            "stockquantityestimation": 0, //库存按件总估值（元）
            "notinstockweightestimation": 0, //未入库称重总估值（元）
            "notinstockquantityestimation": 0, //未入库按件总估值（元）
            "details": [
              {
                "id": 0, //加盟商id
                "name": "", //加盟商名称
                "usestate": {},
                "stockquantity": 0, //库存件数
                "stockweight": 0, //库存重量
                "stockestimation": 0, //库存估值（元）
                "stockweightestimation": 0, //库存称重估值（元）
                "stockquantityestimation": 0, //库存按件估值（元）
                "notinstockweightestimation": 0, //未入库称重估值（元）
                "notinstockquantityestimation": 0, //未入库按件估值（元）
                "notinstockquantity": 0, //未入库件数
                "notinstockweight": 0, //未入库重量
                "notinstockestimation": 0, //未入库估值（元）
                "quantity": 0, //回收件数
                "weight": 0, //回收重量
                "ordernumber": 0, //回收单数
                "grossprofit": 0, //回收毛利
                "amount": 0, //回收金额
                "salesamount": 0, //预估销售金额
                "onsite": {
                  "quantity": 0, //回收件数
                  "ordernumber": 0, //回收单数
                  "weight": 0, //回收重量
                  "grossprofit": 0, //回收毛利
                  "amount": 0, //回收金额
                  "salesamount": 0 //预估销售金额
                },
                "store": {
                  "quantity": 0, //回收件数
                  "ordernumber": 0, //回收单数
                  "weight": 0, //回收重量
                  "grossprofit": 0, //回收毛利
                  "amount": 0, //回收金额
                  "salesamount": 0 //预估销售金额
                }
              }
            ]
          },
        }
      }
    },
    filters: {
      numFilter(value) {
        // 截取当前数据到小数点后两位
        let realVal = parseFloat(value).toFixed(2)
        return realVal
      }
    },
    computed: {
      recoveryweight() {
        let arr = this.all.ordercomplete.recoveryweight.toFixed(0).toString().split('')
        if (arr.length < 6) {
          let diff = 6 - arr.length
          for (let i = 0; i < diff; i++) {
            arr.unshift('0')
          }
          return arr
        } else {
          return arr
        }
      },
      // brotherActivityratio() {
      //   return this.all.user.activityratio.toFixed(2)
      // }
    },
    mounted() {
      this.initSpace();
  
      this.getweek();
      this.getcurrentime();
  
      // 60秒获取一次时间，一直执行下去
      setInterval(() => {
        this.getcurrentime();
      }, 1000);
      // 列表滚动
      this.bsGetProductProcess(); //获取数据
      this.componentTimerFun(); //这个是多长时间获取一次数据
  
      // 获取数据
      
  
      this.getAll().then(() => {
        this.shuinit();
        this.lineinit();
        this.tableList = this.all.newuserorder.details
  
        //  this.all.newuserorder.details.forEach((item,index)=>{
        //     if (item.name.length>3) {
        //       item.name[index] = item.name[index].substr(0,2)+"**"
  
        //     }
        //  })
        //  console.log(this.all.newuserorder.details,"ssssss")
  
        this.initMap()
  
        console.log(this.all.ordercomplete.recoveryweight.toFixed(0).toString().split(''))
      })
  
    },
    methods: {
      // 回收排行
      getRecycle() {
        this.loading = true
        let form = {
          timeType: 1
        }
        return this.$axios.post('/Statistics/Franchise/Recycle', form).then((res) => {
          this.recycle = res
          
          this.loading = false
          return res
        }).catch((err) => {
          this.loading = false
        })
      },
      initSpace() {
        const canvas = this.$refs.spaceCanvas;
        const ctx = canvas.getContext('2d');
        
        // 设置canvas尺寸
        const resize = () => {
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
        };
        resize();
        window.addEventListener('resize', resize);
  
        // 星星配置
        const stars = [];
        const STAR_COUNT = 300; // 增加星星数量（原200）
        const STAR_SPEED = 0.3; // 加快运动速度（原0.1）
        const MIN_RADIUS = 1; // 新增最小半径
        const MAX_RADIUS = 2;   // 增大最大半径（原1.5）
  
        // 修改星星生成逻辑
        for (let i = 0; i < STAR_COUNT; i++) {
          stars.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            radius: Math.random() * (MAX_RADIUS - MIN_RADIUS) + MIN_RADIUS, // 调整半径范围
            alpha: Math.random() * 0.8 + 0.2 // 调整透明度范围（0.2-1.0）
          });
        }
  
        // 修改绘制逻辑（增强闪烁效果）
        const draw = () => {
          ctx.fillStyle = '#061626';
          ctx.fillRect(0, 0, canvas.width, canvas.height);
  
          stars.forEach(star => {
            // 添加光晕效果
            const gradient = ctx.createRadialGradient(
              star.x, star.y, 0, 
              star.x, star.y, star.radius * 2
            );
            gradient.addColorStop(0, `rgba(87, 184, 205, ${star.alpha})`);
            gradient.addColorStop(1, 'rgba(87, 184, 205, 0)');
            
            ctx.beginPath();
            ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
            ctx.fillStyle = gradient;  // 改用渐变填充
            
            // 增强动态效果
            star.alpha += (Math.random() - 0.5) * 0.2; // 增加变化幅度（原0.1）
            star.alpha = Math.max(0.2, Math.min(1, star.alpha)); // 保持最小可见度
            star.x += STAR_SPEED * (0.5 + Math.random()); // 添加随机速度变化
            
            if (star.x > canvas.width) {
              star.x = 0;
              star.y = Math.random() * canvas.height; // 重置时随机y轴位置
            }
            
            ctx.fill();
          });
  
          requestAnimationFrame(draw);
        };
  
        draw();
      },
      initMap() {
        this.$AMapLoader.load({
          key: this.AMapSetting.key,             // 申请好的Web端开发者Key，首次调用 load 时必填
          version: this.AMapSetting.version,      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          // plugins: ['AMap.GeoJSON'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          // AMapUI: {
          //     plugins: ['geo/DistrictExplorer'] // geo
          // },
        }).then((AMap) => {
          let map = new AMap.Map("container", {  //设置地图容器id
            // mapStyle: 'https://geohub.amap.com/mapstyle/clone?id=61e9560a0ba6b52e0f3ab95fd9ce146e',
            mapStyle: 'amap://styles/darkblue',
            zoom: 12, //设置地图的缩放级别
            resizeEnable: true,
            center: [113.042648, 23.625349], //初始化地图中心点位置
          });
  
          // 站点位置Marker：
          let marker = [];
          for (let i = 0; i < this.all.store.position.length; i++) {
            marker[i] = new AMap.Marker({
              icon: '/images/amap/lianluozhan.png',
              offset: new AMap.Pixel(-30, -30),
              position: [this.all.store.position[i].lng, this.all.store.position[i].lat],   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              title: '站点'
            });
            marker[i].content = '站点'
            marker[i].location = [this.all.store.position[i].lng, this.all.store.position[i].lat]
          }
          map.add(marker);
  
  
          // 小哥位置Marker：
          // let brothermarker = []
          // for (let i = 0; i < this.all.brother.position.length; i++) {
          //   if (this.all.brother.position[i].lng != 0 && this.all.brother.position[i].lat != 0) {
          //     brothermarker[i] = new AMap.Marker({
          //       icon: '/images/amap/lajiche.png',
          //       offset: new AMap.Pixel(-30, -30),
          //       position: [this.all.brother.position[i].lng, this.all.brother.position[i].lat],   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          //       title: '小哥'
          //     });
          //     brothermarker[i].content = '小哥'
          //     brothermarker[i].location = [this.all.brother.position[i].lng, this.all.brother.position[i].lat]
          //   }
          // }
          // map.add(brothermarker);
  
          map.setFitView();
  
        }).catch(e => {
          console.log(e);
        })
      },
      // 获取数据
      getAll() {
        return this.$axios.get('/Statistics/BigData/BigData').then((res) => {
  
          this.all = res
          this.getRecycle().then(res => { 
              this.all.amount = res.amount
              this.all.salesamount = res.salesamount
          })
          console.log(this.all)
        })
      },
  
      //十分钟获取一次数据
      componentTimerFun() {
        this.componentTimer = setInterval(() => {
          this.bsGetProductProcess();
        }, 1000 * 60 * 10);
      },
      //获取列表数据
      bsGetProductProcess() {
        clearInterval(this.tableTimer);
        this.tableTop = 0;
        this.tableActionFun();
      },
      // 这步是获取完数据之后判断是否动
      tableActionFun() {
        this.tableListSize = this.tableList.length;
        // 如果获取到的数据长度长于我框显示的条数
        if (this.tableListSize > this.visibleSize) {
          this.tableList = this.tableList.concat(this.tableList); //为了让数据很好的链接
          this.tableTimerFun();
        } else {
          // this.fillTableList(); 不动的时候的补充
        }
      },
      // 滚动时候的操作
      tableTimerFun() {
        var count = 0;
        this.tableTimer = setInterval(() => {
          // 获取当前这个列表的高度
          if (count < (this.tableList.length / 2) * this.lineHeight) {
            this.tableTop -= 1;
            count++;
          } else {
            count = 0;
            this.tableTop = 0;
          }
        }, 50); //越小滚得越快
      },
      // 获取星期几
      getweek() {
        var date = new Date();
        let str = '天一二三四五六';
        this.currenweek = '星期' + str[date.getDay()];
      },
      getcurrentime() {
        // 获取时间
        var date = new Date();
        this.currentime = this.utils.curDateTime(date);
      },
      shuinit() {
        // 这个是图一
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;
  
        // 获取数据
        var recyclinganddelivery = this.all.ordercomplete.recyclinganddelivery
        // X轴：分类
        var type = []
        // Y轴：回收量，出货量
        var delivery = [] //出货量
        var recycling = [] //回收量
        recyclinganddelivery.filter((item)=>item.type != "学校统货").forEach((item) => {
          type.push(item.type)
          delivery.push(item.delivery)
          recycling.push(item.recycling)
        })
  
        option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['回收量', '出库量'],
            textStyle: {
              // fontSize: 10, //字体大小
              color: '#57b8cd' //字体颜色
            }
          },
          grid: {
            top: '15%',
            left: '2%',
            right: '4%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            // data: ['衣物', '纸类', '塑料', '金属'],
            data: type,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#57b8cd'
              }
            },
            axisLine: {
              show: true, //是否显示轴线
              lineStyle: {
                color: '#57b8cd', //刻度线的颜色
                width: 2
              }
            },
            //设置为虚线
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#57b8cd1f'
              }
            },
  
            axisTick: {
              alignWithLabel: true
            },
  
          }],
          yAxis: [{
            type: 'value',
            // 刻度颜色
            axisLabel: {
              show: true,
              textStyle: {
                color: '#57b8cd'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'solid',
                color: '#57b8cd85',
              }
            }, //设置为虚线
            // X,Y轴线
            // axisLine: {
            //   show:true,//是否显示轴线
            //   lineStyle: {
            //     color: '#57b8cd',//刻度线的颜色
            //     width:2,
            //   }
            // }
          }],
          series: [{
            name: '回收量',
            type: 'bar',
            barWidth: '20%',
            // data: [200, 334, 330, 220],
            data: recycling,
            // color: '#dc3545e8', //总体颜色
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#4729FB" // 0% 处的颜色
                }, {
                  offset: 0.5,
                  color: "#3077F7" // 50% 处的颜色
                }, {
                  offset: 1,
                  color: "#1FB0F4" // 100% 处的颜色
                }], false)
              }
            },
          },
          {
            name: '出库量',
            type: 'bar',
            barWidth: '20%',
            // data: [300, 114, 50, 340],
            data: delivery,
            // color: '#fd9314db',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#fd9314db" // 0% 处的颜色
                }, {
                  offset: 0.5,
                  color: "#fdd765" // 50% 处的颜色
                }, {
                  offset: 1,
                  color: "#fdf194" // 100% 处的颜色
                }], false)
              }
            },
          }
          ]
        };
        option && myChart.setOption(option);
      },
      lineinit() {
        // 这是图二
        var chartDom = document.getElementById('main1');
        var myChart = echarts.init(chartDom);
        var option;
  
        var quantitybyweek = this.all.newuserorder.quantitybyweek
        // X轴：星期
        var week = []
        // y轴：回收量
        var count = []
        quantitybyweek.forEach((item) => {
          week.push(item.hours)
          count.push(item.count)
        })
  
        option = {
          xAxis: {
            type: 'category',
            data: week,
            // 刻度颜色
            axisLabel: {
              show: true,
              textStyle: {
                color: '#57b8cd'
              }
            },
            axisLine: {
              show: true, //是否显示轴线
              lineStyle: {
                color: '#57b8cd', //刻度线的颜色
                width: 2
              }
            },
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['回收量(单)'],
            textStyle: {
              color: '#57b8cd' //字体颜色
            }
          },
          grid: {
            top: '15%',
            left: '2%',
            right: '4%',
            bottom: '2%',
            containLabel: true
          },
          yAxis: {
            type: 'value',
            minInterval:1,
            // 刻度颜色
            axisLabel: {
              show: true,
              textStyle: {
                color: '#57b8cd'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#57b8cd85',
              }
            },
          },
          series: [{
            name: '回收量(单)',
            data: count,
            type: 'line',
            color: '#57b8cd'
          }]
        };
  
        option && myChart.setOption(option);
      }
    }
  }
  </script>
  <style scoped>
  .pro-item>>>.el-progress__text {
    font-size: 1.6rem !important;
    color: #fff;
  }
  .space-canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1; /* 确保在内容下方 */
    background: #000;
  }
  </style>
  <style lang="scss" scoped>
  .bigdata {
    // min-width: 1550px;
    width: 100%;
    // min-height: 1080px;
    height: 100vh;
    // background-image: url("@/static/images/bigdata.png");
    background-position: center;
    background-size: contain;
    // background-repeat: no-repeat;
    overflow: hidden;
    padding: 0px 30px 30px 30px;
    box-sizing: border-box;
    color: #57b8cd;
  
    .big-top {
      width: 100%;
      height: 115px;
      display: flex;
      position: relative;
  
      // min-width: 1490px;
      .middle-item {
        text-align: center;
        line-height: 70px;
        font-weight: bold;
        font-size: 1.8rem;
        flex: 1;
        // min-width: 800px;
        min-width: 983px;
        background-image: url("@/static/images/head.png");
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
      }
  
      .top-item {
        height: 55px;
        // width: 430px;
        min-width: 430px;
        color: #57b8cd;
        line-height: 54px;
        font-size: 1.1rem;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        box-sizing: border-box;
      }
  
      .posi-left {
        padding-left: 15px;
        background-image: url("@/static/images/tl1.png");
  
        >div {
          width: 300px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
  
      .posi-right {
        padding-left: 130px;
        padding-right: 20px;
        background-image: url("@/static/images/tr1.png");
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
  
    }
  
    .big-bottom {
      width: 100%;
      height: calc(100vh - 150px);
      display: flex;
      margin-top: 10px;
  
      .left-box {
        display: flex;
        flex-direction: column;
        width: 30%;
        padding-right: 30px;
        box-sizing: border-box;
  
        .people {
          width: 100%;
          display: flex;
  
          .people-item {
            flex: 1;
            height: auto;
            border: 1px solid #57b8cd;
            padding: 20px;
            padding-bottom: 40px;
            position: relative;
  
            &::after {
              position: absolute;
              content: "";
              bottom: 5px;
              left: 5px;
              height: 0px;
              width: 0px;
              border-left: 10px solid #57b8cd;
              border-bottom: 10px solid #57b8cd;
              border-top: 10px solid transparent;
              border-right: 10px solid transparent;
            }
  
            &::before {
              position: absolute;
              content: "";
              top: 5px;
              right: 5px;
              height: 0px;
              width: 0px;
              border-left: 10px solid transparent;
              border-bottom: 10px solid transparent;
              border-top: 10px solid #57b8cd;
              border-right: 10px solid #57b8cd;
            }
  
            .number {
              font-size: 3rem;
              font-weight: bold;
              display: flex;
              // align-items: center;
              justify-content: center;
  
              .danwei {
                font-weight: normal;
                font-size: 1rem;
                padding-top: 35px;
                padding-left: 10px;
              }
            }
  
            .text {
              text-align: center;
              color: #fff;
              font-size: 1rem;
              padding: 20px 0px;
              padding-top: 10px;
            }
  
            .radius {
              display: flex;
              width: 103%;
  
              .center {
                display: flex;
                margin: 0 auto;
                border-radius: 15px;
                box-sizing: border-box;
                padding: 5px 20px;
                background-color: #57b8cd;
  
                span {
                  color: #000;
                }
  
                .r-number {
                  background-color: #000;
                  box-sizing: border-box;
                  padding: 0px 10px;
                }
              }
            }
          }
        }
  
        .account {
          flex: 1;
          width: 100%;
          height: auto;
          padding: 15px;
          box-sizing: border-box;
          border: 2px solid #57b8cd;
          position: relative;
          font-size: 12px;
          background-image: linear-gradient(-45deg, #57b8cd1f, transparent, #57b8cd1f);
  
          &:nth-child(3) {
            .title {
              padding-left: 5px;
  
            }
  
            .shu-chart {
              width: 100%;
              height: 225px;
            }
          }
  
          .position {
            position: absolute;
            height: 34px;
            width: 50px;
            background-image: url("@/static/images/one.png");
            background-position: center;
            background-size: cover;
  
            &:nth-child(1) {
              left: -6px;
              top: -7px;
            }
  
            &:nth-child(2) {
              background-image: url("@/static/images/two.png");
              right: -7px;
              top: -6px;
              height: 50px;
              width: 34px;
            }
  
            &:nth-child(3) {
              background-image: url("@/static/images/three.png");
              left: -7px;
              bottom: -6px;
              height: 50px;
              width: 34px;
            }
  
            &:nth-child(4) {
              background-image: url("@/static/images/four.png");
              right: -6px;
              bottom: -7px;
            }
          }
  
          .title {
            background-image: url("@/static/images/title.png");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            width: 155px;
            height: 25px;
            box-sizing: border-box;
            padding-left: 5px;
            color: #fff;
            line-height: 25px;
          }
        }
  
        .number-top {
          // margin: 10px 0px;
          display: flex;
          justify-content: space-around;
          align-items: flex-end;
  
          .n-left {
            font-size: 3rem;
            font-weight: bold;
          }
  
          .n-right {
            padding-bottom: 7px;
            box-sizing: border-box;
            color: #007bff;
            font-size: 1.2rem;
          }
        }
  
        .gradient {
          width: 100%;
          height: 15px;
          background-image: linear-gradient(to right, transparent, #ffc107, transparent);
          margin-bottom: 20px;
        }
      }
  
      .middle-box {
        flex: 1;
        // min-width: 740px;
        box-sizing: border-box;
        padding-top: 45px;
        display: flex;
        flex-direction: column;
  
        .head {
          width: 100%;
          height: auto;
          display: flex;
          align-items: center;
          justify-content: center;
  
          .head-center {
            width: 90%;
            height: 100px;
            background-image: url("@/static/images/ban.png");
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            position: relative;
            display: flex;
            align-items: flex-end;
            justify-content: center;
  
            .head-name {
              color: #fff;
              font-size: 1.3rem;
              box-sizing: border-box;
              padding-bottom: 5px;
            }
  
            .posi-box {
              width: 100%;
              height: 100px;
              position: absolute;
              top: -50px;
              display: flex;
              align-items: flex-end;
              justify-content: center;
  
              .center {
                width: 450px;
                height: auto;
                display: flex;
                align-items: center;
                justify-content: space-between;
  
                .center-item {
                  flex: 1;
                  height: 90px;
                  border: 1px solid #57b8cd;
                  border-radius: 7px;
                  background-color: #57b8cd38;
                  text-align: center;
                  line-height: 85px;
                  color: #fff;
                  font-size: 5rem;
                  font-weight: bold;
                }
              }
            }
          }
  
        }
  
        .map {
          width: 90%;
          height: auto;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 30px auto 10px;
          border: 2px solid #57b8cd;
          position: relative;
          flex: 1;
  
          .position {
            position: absolute;
            height: 34px;
            width: 50px;
            background-image: url("@/static/images/one.png");
            background-position: center;
            background-size: cover;
  
            &:nth-child(1) {
              left: -6px;
              top: -7px;
            }
  
            &:nth-child(2) {
              background-image: url("@/static/images/two.png");
              right: -7px;
              top: -6px;
              height: 50px;
              width: 34px;
            }
  
            &:nth-child(3) {
              background-image: url("@/static/images/three.png");
              left: -7px;
              bottom: -6px;
              height: 50px;
              width: 34px;
            }
  
            &:nth-child(4) {
              background-image: url("@/static/images/four.png");
              right: -6px;
              bottom: -7px;
            }
          }
  
          .map-center {
            width: 100%;
            height: 100%;
            // background-image: url("@/static/images/map.png");
            background-position: center;
            background-size: cover;
          }
        }
  
        .progress {
          width: 100%;
          height: auto;
          display: flex;
          align-items: center;
          justify-content: space-between;
  
          .shu {
            width: 1px;
            height: 70px;
            background-color: grey;
          }
  
          .pro-item {
            text-align: center;
            flex: 1;
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
          }
        }
      }
  
      .right-box {
        display: flex;
        flex-direction: column;
        width: 30%;
        padding: 0px;
        padding-left: 30px;
        box-sizing: border-box;
  
        .account {
          .records {
            width: 100%;
            height: 90%;
            box-sizing: border-box;
            overflow: hidden;
            position: relative;
  
            ul {
              width: 100%;
              box-sizing: border-box;
              padding: -1px 35px;
              position: absolute;
              left: 0px;
  
              li {
                width: 100%;
                height: 30px;
                line-height: 30px;
                display: flex;
                align-items: center;
                justify-content: space-between;
  
                // .flex-item {
                //   &:nth-child(2) {
                //     width: 260px;
                //     overflow: hidden;
                //     text-overflow: ellipsis;
                //     white-space: nowrap;
                //     text-align: center;
                //   }
                // }
                .flex-item {
                  width: 260px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  text-align: center;
                  margin: 0 10px;
                }
              }
            }
          }
        }
      }
    }
  }
  </style>
  